md-data-table 使用说明

现在material比较流行，angular也是material的急先锋，今天说说控件md-data-table的使用方式。

前提条件，有一定的angular基础，如果你从一开始就使用的angular2的话，这篇文章请忽略。

md-data-table控件其实有两个，我们用brower安装的话其实安装的是iamisti/md-data-table这个版本，但是这个版本不支持ajax查询刷新，业务是我研究不够。我用的是daniel-nagy/md-data-table这个版本,感觉这个版本用法比较清晰，依赖比较少，废话少说，另外两个版本我都用过，实话实说，在大数据集的时候daniel-nagy/md-data-table性能真的要甩另外那个几条街（人格担保实测结果），废话少说，讲讲他的使用。

初始化

先说安装，使用brower的方式是：

1	bower install angular-material-data-table

可以看出来他的名称并不是md-data-table，这里一定要注意，我开始写错了，所以下载了另外一个版本，满满的都是泪，当然你直接去github上下载源码安装也没有问题。

页面里面加入如下引用：

1
2

<link rel="stylesheet" type="text/css" href="bower_components/angular-material-data-table/dist/md-data-table.min.css" />
<script type="text/javascript" src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>

这个控件的module名称是md.data.table，所以在使用的，我们需要引入

1	angular.module('myApp', ['md.data.table', 'ngMaterial']);

使用

一切还是从hello world开始，代码讲解最清晰：

<-- creat by coffee-->
<md-data-table-container>
      <table md-data-table md-progress="deferred">
        <thead md-order="query.order">
        <tr>
          <th numeric name="平均延时时间" unit="秒" order-by="avg" trim></th>
          <th numeric name="最大延时时间" unit="秒" order-by="max" trim></th>
          <th numeric name="访问次数" unit="次" order-by="count" trim></th>
          <th name="域名" order-by="domain"></th>
          <th name="请求路径" order-by="path"></th>
          <th name="方法" order-by="method"></th>
        </tr>
        </thead>
        <tbody>
        <tr md-auto-select ng-repeat="info in timeoutInfos | orderBy: query.order | limitTo: query.limit: (query.page - 1) * query.limit">
          <td show-unit>{{info.avg/1000 | number:3}}</td>
          <td show-unit>{{info.max/1000 | number:3}}</td>
          <td show-unit>{{info.count}}</td>
          <td>{{info.domain}}</td>
          <td>{{info.path}}</td>
          <td>{{info.method}}</td>
        </tr>
        </tbody>
      </table>
    </md-data-table-container>
    <md-data-table-pagination md-row-select="[15,30,50,100]" md-limit="query.limit" md-page="query.page"
                              md-total="{{timeoutInfos.length}}"></md-data-table-pagination>

上面是我做实时监控的代码片段。

接下来是对应的js

angular.module('analyse', ['ngMaterial', 'ngResource', 'md.data.table']).config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default');
  }).factory("apiService", ['$resource', function ($resource) {
    var apiService = {};
    apiService.GetTimeouts = function () {
      return $resource("/v1/api/timeouts")
    }
    return apiService;
  }]).controller("timeoutsController", ['$scope', '$timeout', 'apiService', function ($scope, $timeout, apiService) {
    $scope.search = {}
    $scope.query = {
      filter: '',
      order: '-avg',
      limit: 15,
      page: 1
    };
    var getTimeoutInfo = function () {
      $scope.deferred = apiService.GetTimeouts().query($scope.search, function (data) {
        $timeout.cancel($scope.timer);
        $scope.timeoutInfos = data;
        $scope.timer = $timeout(getTimeoutInfo, $scope.flashTime * 1000)
      }).$promise;
    }
    getTimeoutInfo()
    $scope.timer = $timeout(getTimeoutInfo, $scope.flashTime * 1000)
  }])

这里的例子和官网的不一样，官网的Demo是实时查询并获取结果展示的，所有数据的过滤排序在server端做掉，而我这个项目不行，主要是数据量太大，我也懒得在后端去排序（demo项目我用的leveldb，没有排序功能，而且监控需要展示的数据量要多，并且在页面排序是最快的，所以我就使用了页面内排序），其实也很简单，把data-table的所有事件去掉就不会有后端的resource请求，这样一来，自动就转为页面排序了。

我在js里面定义了$scope.query的变量用于初始化，这里说一下默认排序，这个插件的默认排序只要指定列的name就可以了，但是很多时候我们需要顺序倒序这样排序，官网并没有说明，后来看了一下代码，它默认使用的是顺序排序，如果想要倒序的话，只需要前面加一个减号号就可以了，聪明的童鞋肯定会想那如果填一个加号呢，答案是肯定的，这货就是按照正负来判断排序的，好高明的写法真心赞。

指令说明

这里有好几个指令比较有用

1.md-order

放在<thead>标签里面，用于指定表格初始化的时候使用哪个做默认排序.

2.md-trigger(排序)

放在<thead>标签里面，用于在点击表头排序箭头的时候触发的事件，ajax异步服务端排序就需要在这里增加扩展

3.order-by

放在<th>标签里面，用于标示该列用于排序的对象里面的name

4.sig-row

放在<thead>标签里面，指定该表中哪个字段作为索引，默认最后一列作为索引，值为列数

5.numeric

放在<th>标签里面，表示这一列是否是数字

6.unit

放在<th>标签里面，用于标记本列的单位，这和功能大爱啊，他会自动用括号吧这个包起来，放在标题的后面。

7.show-unit

放在<td>里面，和unit联合起来使用，加了这个标签之后，会自动把单位放在这个单元格的值的后面

8.md-limit

在页脚的分页组件里面默认限制每页显示条数

9.md-page

标记当前页号

10.md_total

标记当前数据集的总量，这里可以是当前集合的总量，也可以是从server端拿到的数据总量

11.md-row-select

扩展分页选择项，默认是[5,10,15]

12.md-trigger(分页)

其实和排序没有区别，都是事件触发需要调用的方法，在不同的地方触发不同的事件

13.md-progress

放在<table>中，主要是在表格加载的时候可以让用户看到进度，当然什么时候调用，可以自己定义，注意这里的类型时promise，你需要手工通知。

其他

这个控件还支持在单元格使用md-select指令，我没有用到，所以也没有仔细看，各位看官请自行异步github参考。